<template>
  <CommonPage :showHeader="false">
    <article class="flex flex-sub flex-column"  v-if="articleInfo">
      <section class="padding-lr padding-top">
        <n-page-header @back="handleBack">
          <template #title>
            <n-button quaternary class="text-xxs" @click="handleBack">返回</n-button>
          </template>
          <template #subtitle>
            当前状态：<n-text :style="'color:'+getArticleStatusColor(articleInfo.status)">  {{getArticleStatus(articleInfo.status)}} </n-text>
          </template>
          <template #extra>
            <n-space>
              <n-button type="error" round class="padding-lr text-xxs" @click="handleFail">不通过</n-button>
              <n-button type="success" round class="padding-lr text-xxs" @click="handlePass">通过</n-button>
            </n-space>
          </template>
        </n-page-header>
      </section>
      <section class="overflow-auto flex flex-sub bg-white flex-column radius-lg  margin-tb padding text-black">
        <n-scrollbar>
          <div class="text-center text-lg text-bold">{{ articleInfo.title }}</div>
          <div class="text-center">
            <n-text class="padding-xs">
              <n-icon style="vertical-align: -2px">
                <Icon icon="mdi:eye-outline"></Icon>
              </n-icon>
              {{ articleInfo.viewCount }}
            </n-text>
            <n-text class="padding-xs">
              <n-icon style="vertical-align: -2px">
                <Icon icon="ant-design:like-twotone"></Icon>
              </n-icon>
              {{ articleInfo.likeCount }}
            </n-text>
            <n-text class="padding-xs">
              <n-icon style="vertical-align: -2px">
                <Icon icon="system-uicons:write"></Icon>
              </n-icon>
              {{ articleInfo.name }}
            </n-text>
            <n-text class="padding-xs">
              <n-icon style="vertical-align: -2px">
                <Icon icon="material-symbols:nest-clock-farsight-analog-outline-rounded"></Icon>
              </n-icon>
              {{ articleInfo.updateTime }}
            </n-text>
          </div>
          <div class="text-break-all padding-lg">
            <div v-html="articleInfo.content"></div>
          </div>
        </n-scrollbar>
      </section>
    </article>
  </CommonPage>


</template>

<script setup lang="ts">
import CommonPage from "@/components/page/CommonPage.vue";
import {getArticleStatus,getArticleStatusColor} from "@/utils/common/standard";
import {onMounted, ref} from "vue";
import {useRoute} from "vue-router";
import {Icon} from "@iconify/vue";
import router from "@/router";
import api from "@/api";

const route = useRoute()
const articleInfo = ref()
onMounted(() => {
  if (route.query.articleInfo) {
    //@ts-ignore
    articleInfo.value = JSON.parse(decodeURIComponent(route.query.articleInfo))
  }
})
const handleBack = () => {
router.back()
}

const handlePass =()=>{
  window.$dialog.info({
    title: '确定通过此文章？',
    positiveText: '确定',
    negativeText: '取消',
    onPositiveClick: () => {
      api.article.pass({
        id:articleInfo.value.id
      }).then(res=>{
        if(res&&res.data.code===0){
          articleInfo.value.status=2
          window.$message.success(res.data.msg)
        }
      })
    }
  })
}
const handleFail=()=>{
  window.$dialog.info({
    title: '确定不通过此文章？',
    positiveText: '确定',
    negativeText: '取消',
    onPositiveClick: () => {
      api.article.fail({
        id:articleInfo.value.id
      }).then(res=>{
        if(res&&res.data.code===0){
          articleInfo.value.status=3
          window.$message.success(res.data.msg)
        }
      })
    }
  })

}
</script>

<style scoped>

</style>